<template>
  <div id="product-list-One">
    <h1>Product List One</h1>
    <ul>
      <!--eslint-disable-next-line-->
      <li v-for="product in saleProducts">
        <span class="name">{{ product.name }}</span>
        <span class="price">${{ product.price }}</span>
      </li>
    </ul>
    <button @click="reducePrice(4)">商品降价</button>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {mapActions} from "vuex";
export default {
  name: "one",
  data() {
    return {};
  },
  computed: {
    products() {
      return this.$store.state.products;
    },
    // saleProducts() {
    //   return this.$store.getters.saleProducts;
    // },
    ...mapGetters([
        "saleProducts"
    ])
  },
  methods:{
    //   reducePrice:function(amount){
    //     //   this.$store.state.products.forEach(element => {
    //     //       element.price-=1;
    //     //   });
    //     //this.$store.commit("reducePrice");
    //     this.$store.dispatch("reducePrice",amount);
    //   }
      ...mapActions([
        "reducePrice"
    ])
  }
};
</script>

<style scoped>
#product-list-One {
  background: #fff8b1;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  padding: 10px 20px;
}

#product-list-One ul {
  padding: 0;
  list-style-type: none;
}
#product-list-One ul li {
  margin-right: 10px;
  margin-top: 10px;
  padding: 20px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.7);
}
.price {
  font-weight: bold;
  color: #860ce8;
  display: block;
}
</style>